import * as echarts from 'echarts'
export default function DisplayEC (ref:any, value:string) {
    let myChart = echarts.init(ref)
        myChart.dispose();
    // 通过ref属性来获取图表的实例
    type EChartsOption = echarts.EChartsOption;
     myChart = echarts.init(ref)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
    const symbolSize:number = 15

    console.log('echarts', value)
    let option: EChartsOption
    if (value === 'a') {
        // @ts-ignore
        option =  {
            title: {
                text: '数据总览',
                top: '20px',
                left: '30px',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 500
                }
            },
            // 位置
            grid: {
                top: '70',
                bottom: '10%',
                right: '3%',
                left: '2%',
                containLabel: true
            },
            legend: {
                data: ['去年', '今年'],
                type: 'scroll',
                top: 10,
                right: 30,
                itemStyle: {
                    color: 'rgba(255,255,255,0)',
                    borderColor: 'rgba(255,255,255,0)'
                },
                // icon:"image:https://img0.baidu.com/it/u=1487799431,376049746&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=473",
                lineStyle: {
                    width: 1.5
                },
                textStyle: {
                    color: '#e15e0d',
                    fontWeight: 600,
                    fontSize: '14px'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            // x轴
            xAxis: {
                show: true,
                type: 'category',
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#ffb300'
                },
                axisLine: {
                    lineStyle: {
                        color: '#e15e0d',
                        width: 3
                    }
                },
                axisLabel: {
                    // @ts-ignore
                    textStyle: {
                        color: 'black'
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15']
            },
            // y轴
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#f57b00'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f57b00',
                        width: 3
                    }
                }
            },
            // 数据
            series: [
                {
                    data: [600, 800, 600, 350, 800, 550, 800, 500, 600, 500, 500, 300, 600, 1000, 600],
                    type: 'line',
                    name: '去年',
                    // @ts-ignore
                    top: 0,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: symbolSize,
                    lineStyle: {
                        color: '#ffb300'
                    },
                    areaStyle: {
                        symbolSize: symbolSize,
                        textStyle: {
                            // 文字颜色
                            color: '#ffb300',
                            // 字体大小
                            fontSize: 18,
                            fontWeight: 500
                        },
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'rgb(255,179,0,0)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgb(255,179,0)'
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: '#e15e0d',
                        borderWidth: 2,
                        borderColor: '#fff'
                    }
                },

                {
                    data: [800, 700, 1000, 200, 500, 650, 1000, 600, 500, 500, 700, 700, 600, 500, 500],
                    type: 'line',
                    smooth: true,
                    name: '今年',
                    symbol: 'circle',
                    symbolSize: symbolSize,
                    lineStyle: {
                        color: '#f7ff00'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'rgb(198,255,0,0)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgb(196,255,0)'
                                }
                            ],

                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: '#e1cb3c',
                        borderWidth: 1,
                        borderColor: '#fff'
                    }
                }
            ]
        }
    } else if (value === 'b') {
        option = {
            title: {
                text: '数据总览',
                top: '20px',
                left: '30px',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 500
                }
            },
            // 位置
            grid: {
                top: '70',
                bottom: '10%',
                right: '3%',
                left: '2%',
                containLabel: true
            },
            legend: {
                data: ['去年', '今年'],
                type: 'scroll',
                top: 10,
                right: 30,
                itemStyle: {
                    color: 'rgba(255,255,255,0)',
                    borderColor: 'rgba(255,255,255,0)'
                },
                // icon:"image:https://img0.baidu.com/it/u=1487799431,376049746&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=473",
                lineStyle: {
                    width: 1.5
                },
                textStyle: {
                    color: '#133bc9',
                    fontWeight: 600,
                    fontSize: '14px'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                show: true,
                type: 'category',
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#ffb300'
                },
                axisLine: {
                    lineStyle: {
                        color: '#e15e0d',
                        width: 3
                    }
                },
                axisLabel: {
                    // @ts-ignore
                    textStyle: {
                        color: 'black'
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15']
            },
            // y轴
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#f57b00'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f57b00',
                        width: 3
                    }
                }
            },
            // 数据
            series: [
                {
                    data: [600, 800, 600, 350, 800, 550, 800, 500, 600, 500, 500, 300, 600, 1000, 600],
                    type: 'line',
                    name: '去年',
                    // @ts-ignore
                    top: 0,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: symbolSize,
                    lineStyle: {
                        color: '#ffb300'
                    },
                    areaStyle: {
                        symbolSize: symbolSize,
                        textStyle: {
                            // 文字颜色
                            color: '#ffb300',
                            // 字体大小
                            fontSize: 18,
                            fontWeight: 500
                        },
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'rgb(255,179,0,0)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgb(255,179,0)'
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: '#e15e0d',
                        borderWidth: 2,
                        borderColor: '#fff'
                    }
                },
            ]
        }
    } else if (value === 'c') {
        option =  {
            title: {
                text: '数据总览',
                top: '20px',
                left: '30px',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 500
                }
            },
            // 位置
            grid: {
                top: '70',
                bottom: '10%',
                right: '3%',
                left: '2%',
                containLabel: true
            },
            legend: {
                data: ['去年', '今年'],
                type: 'scroll',
                top: 10,
                right: 30,
                itemStyle: {
                    color: 'rgba(255,255,255,0)',
                    borderColor: 'rgba(255,255,255,0)'
                },
                // icon:"image:https://img0.baidu.com/it/u=1487799431,376049746&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=473",
                lineStyle: {
                    width: 1.5
                },
                textStyle: {
                    color: '#a8d214',
                    fontWeight: 600,
                    fontSize: '14px'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            // x轴
            xAxis: {
                show: true,
                type: 'category',
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#a8d214'
                },
                axisLine: {
                    lineStyle: {
                        color: '#a8d214',
                        width: 3
                    }
                },
                axisLabel: {
                    // @ts-ignore
                    textStyle: {
                        color: 'black'
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15']
            },
            // y轴
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#a8d214'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#a8d214',
                        width: 3
                    }
                }
            },
            // 数据
            series: [
                {
                    data: [600, 800, 600, 350, 800, 550, 800, 500, 600, 500, 500, 300, 600, 1000, 600],
                    type: 'line',
                    name: '去年',
                    // @ts-ignore
                    top: 0,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: symbolSize,
                    lineStyle: {
                        color: '#a8d214'
                    },
                    areaStyle: {
                        symbolSize: symbolSize,
                        textStyle: {
                            // 文字颜色
                            color: '#a8d214',
                            // 字体大小
                            fontSize: 18,
                            fontWeight: 500
                        },
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'rgb(168,210,20,0)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(168,210,20,.7)'
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: '#a8d214',
                        borderWidth: 2,
                        borderColor: '#fff'
                    }
                }
            ]
        }
    }else if (value === 'd') {
        option = {
            title: {
                text: '数据总览',
                top: '20px',
                left: '30px',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 500
                }
            },
            // 位置
            grid: {
                top: '70',
                bottom: '10%',
                right: '3%',
                left: '2%',
                containLabel: true
            },
            legend: {
                data: ['去年', '今年'],
                type: 'scroll',
                top: 10,
                right: 30,
                itemStyle: {
                    color: 'rgba(255,255,255,0)',
                    borderColor: 'rgba(255,255,255,0)'
                },
                // icon:"image:https://img0.baidu.com/it/u=1487799431,376049746&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=473",
                lineStyle: {
                    width: 1.5
                },
                textStyle: {
                    color: '#133bc9',
                    fontWeight: 600,
                    fontSize: '14px'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            // x轴
            xAxis: {
                show: true,
                type: 'category',
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#2d95ff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#2d95ff',
                        width: 3
                    }
                },
                axisLabel: {
                    // @ts-ignore
                    textStyle: {
                        color: 'black'
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15']
            },
            // y轴
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#2d95ff'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2d95ff',
                        width: 3
                    }
                }
            },
            // 数据
            series: [

                {
                    data: [500, 700, 500, 200, 500, 650, 400, 600, 500, 400, 700, 700, 600, 500, 600],
                    type: 'line',
                    smooth: true,
                    name: '今年',
                    symbol: 'circle',
                    symbolSize: symbolSize,
                    lineStyle: {
                        color: '#355eed'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'rgba(55, 102, 243,0)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(55, 102, 243,.7)'
                                }
                            ],

                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: '#355eed',
                        borderWidth: 1,
                        borderColor: '#fff'
                    }
                }
            ]
        }
    }
    // @ts-ignore
    myChart.setOption(option)
}
